<!DOCTYPE html>
<html lang="en">
        <head>
        <meta charset="utf-8">
        <title>enrol</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <script type="text/javascript" src="js/vue.js" ></script>
        <script src="js/jquery-1.11.0.min.js"></script>
        <style>
        	 @charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	font-size: 0.267rem;
	font-family: helvetica;
	background-color: #25282d;
}
#header {
	width: 10rem;
	margin-top: 1.06rem;
	border-bottom: 1px solid #D5CDCD;
}
#header img {
	width: 0.6rem;
	height: 0.6rem;
	margin-left: 0.61333rem;
	margin-bottom: 0.2rem;
}
#content {
	margin-top: 0.81rem;
	margin-left: 0.6666rem;
	color: #fff;
}
#content img {
	display: block;
	height: 1.5466666667rem;
	width: 1.5466666667rem;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	float: right;
	margin-right: 1.2rem;
}
#content p {
	display: block;
	margin-left: 0.8rem;
	font-size: 0.3rem;
	padding: 0.06rem;
	letter-spacing: 0.0001rem;
}
#content_baoxian {
	border-top: 1px solid #fff;
	width: 8rem;
	margin-top: 0.81rem;
	margin-left: 0.9666rem;
	color: #fff;
}
#content_baoxian h5 {
	font-size: 0.3rem;
	display: block;
	margin: 0.5rem 0rem 0.4rem 0.6rem;
}
#content_baoxian p {
	display: block;
	margin-left: 0.6rem;
	font-size: 0.3rem;
	padding: 0.06rem;
	letter-spacing: 0.0001rem;/*字间距*/
	margin-left: 1.6rem;
}
#content_baoxian input {
	margin-left: 0.8rem;
}
#centent_zhifu {
	display: flex;
	flex-direction: row;
	border-top: 1px solid #fff;
	width: 8rem;
	height: 2rem;
	margin-top: 0.81rem;
	margin-left: 0.9666rem;
	color: #fff;
}
#centent_zhifu h5 {
	font-size: 0.3rem;
	display: block;
	margin: 0.5rem 0rem 0.4rem 0.6rem;
}
#centent_zhifu img {
	display: block;
	height: 0.7rem;
	width: 0.7rem;
	margin: 1.4933333rem 0.4rem;
}
#centent_xuzhi {
	border-top: 1px solid #fff;
	width: 8rem;
	margin-top: 0.81rem;
	margin-left: 0.9666rem;
	color: #fff;
}
#centent_xuzhi p {
	margin-left: 1.2rem;
	font-size: 0.3rem;
}
#centent_xuzhi h5 {
	font-size: 0.3rem;
	display: block;
	margin: 0.5rem 0rem 0.4rem 0.6rem;
}
#footer {
	margin-top: 0.81rem;
	margin-left: 5.5966rem;
	display: flex;
	flex-direction: row;
	
}
#footer h5 {
	font-size: 0.3rem;
	display: block;
	margin: 0.5rem 0rem 0.4rem 0.6rem;
	color: #fff;
	width: 2rem;
	float: left;
}
#footer input[type="button"] {
	float: left;
	border: none;
	outline: none;
	background: #3392ea;
	display: block;
	color: #fff;
	width: 1.8rem;
	font-size:0.3rem;
	margin-top:0.4rem;

}#footer a {
	float: left;
	border: none;
	outline: none;
	background: #3392ea;
	display: block;
	color: #fff;
	width: 1.8rem;
	font-size:0.3rem;

}
  
  
  @charset "utf-8";
/* 样式初始化 样式重置 */
body{
	margin:0;
	font-family:helvetica;
	/*background:#EBEBEB;*/
	}

body *{
	-webkit-text-size-adjust:100%;/*横竖屏切换 放大  禁止用户自己缩放*/
/*	-webkit-user-select:none;/*长时间按住 会选中文字 ios下*/
	}
a,button,input{ -webkit-tap-highlight-color:rgba(0,0,0,0)}/*点击后背面会出现阴影，透明度为0 去掉阴影*/
button,input{ -webkit-appearance:none; border-radius:0;}/*去掉默认样式*/
a{ text-decoration:none;}
input{ outline:none; vertical-align:middle}/*去掉发光外框*/
ul{ margin:0; padding:0; list-style:none;}
img{ vertical-align:middle;}
h3,h4,p{ margin:0;}
.left{ float:left}
.right{ float:right;}
.clearfix:after{ content:''; display:block; clear:both;}/*清除浮动*/



        </style>
        <script>
        	(function (){
               var html=document.documentElement;

               var width=window.screen.width;
	           var height=window.screen.height;

               html.style.fontSize=width/10+'px';
           
           }) ();
        
 
        function a(flag){
          var nowVal=$("#inputVal").val();
          if (flag=='+'){
            $("#inputVal").val(parseInt(nowVal)+1);
            }
            else if(flag=='-'){
             $("#inputVal").val(nowVal-1);
             }
          }
         //输入框如果没有值则将输入框重的值重置为1
       
         function b(nowVal){
          if (nowVal.length==0){
            $("#inputVal").val(1);
           }
         }
         
         
         var app=new Vue({
		 		el:"#content",
		 		data:{		 			
		 			thumb:"",		 					 			
		 			intro:"",
		 		    traintime:"",
		 		    price:"",
		 		    name:"",
		 			notice:"",
		 			traintime:"",
		 		    bmnotice:""
		 		},
		 		mounted:function(){
		 			this.getData();
		 		},
		 		methods:{
		 			getData:function(){
		 				var id=location.href.split("?")[1].split("=")[1];
		 				var _this=this;				
		 				$.ajax({
		 					type:"get",		
		 					url:"http://172.24.10.175/workout/api.php/lists/mod/train/degree/"+id,
		 					async:true,
		 					dataType:"jsonp",
		 					success:function(data){		 					
		 						_this.name=data[1].name;
		 						_this.intro=data[1].thumb;
		 						_this.price=data[1].price;
		 						_this.intro=data[1].intro;
		 						_this.notice=data[1].notice;
		 						_this.bmnotice=data[1].bmnotice;
		 						_this.traintime=data[1].traintime;
		 						
		 					}
		 				});
		 				                      


		 			}
		 		}
		 	});
         
         
         
         
         
      </script>
        </head>

       <body>
         <div id="header"> <a href="training.html"  ><img src="img/jiantou.png" ></a>  <img src="img/aixin-1.png" style="margin-left:7.5rem; margin-top:0.2rem; height:0.5rem; width:0.5rem;"></div>
          <div id="content"><img src="img/tvdii3djfdr443.png">
            <!--<p>用户名：李冉</p>
            <p>联系方式：13546587895</p>-->
            <div style="display:flex"><p> 购买数量：</p>
             <div style="font-size:0.3rem;">
                 <a onclick="a('-');">-</a>
                 <input id="inputVal" onblur="b(this.value);" onkeyup="this.value=this.value.replace(/\D/gi,'')" value="1" type="text" style="width:1rem; height:0.3rem;" />
                 <a onclick="a('+');">+</a>
             </div>
            </div>
         
          <p> 训练名称：{{name}} </p>
          <p> 价格：{{price}}元</p>
          <!--<p>保险：59元 </p>-->
          <p>活动类型：团体</p>
         </div>

        <div id="content_baoxian">
          <h5>保险信息:</h5>
          <p>人身意外伤害险：1000元
          <input type="radio" name="1">
          </p>
          
          <p>意外身故、伤残：5000元
          <input type="radio" name="2">
          </p>
          
          <p>意外医药补偿险：1000元
           <input type="radio" name="3">
           </p>
        </div>
         
         <div id="centent_zhifu">
           <h5>支付方式:</h5>
           <img src="img/yinlian.png"><img src="img/zhifubao.png"><img src="img/weixn.png"> </div>
           <div id="centent_xuzhi">
           <h5>报名须知</h5>
           <p>1.训练采用全封闭的训练方式,即入营学员的训练及生活统一训练营安排。</br>
             2.如因不可抗拒力(天气等),导致活动流程或内容变更调整,请遵守训练营教官在活动中的各项安排。</br>
             3.一切行动听从教官指挥，如不遵守学员守则，严重者立即退营，费用不退。</br>
           </p>
         </div>


    <div id="footer">
      <h5>总计：500元</h5>
      <a href="training.html"><input type="button" value="结算"></a>
    </div>

</body>
</html>